﻿@{
    ViewBag.Title = "Location Reporter";
}
<link rel="stylesheet" href="http://html5demos.com/css/html5demos.css" type="text/css" />
<link rel="stylesheet" href="http://html5demos.com/css/html5demos.css" type="text/css" />
<script src="http://html5demos.com/geo/js/h5utils.js"></script>

<section id="wrapper">
    <header>
        <header>
            <h1>
                geolocation</h1>
        </header>
        <meta name="viewport" content="width=620" />
        <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <div class="divborder">
            Driver User Id:
            <input id="userid" value="sample" /><br />
            Driver User PassHash:
            <input id="passhash" value="sample2" /><br />
        </div>
        <div id="serverresponse" class="divborder" style="font-size: 10pt;">
            server response..
        </div>
        <article>
            <p>
                Finding your location: <span id="status">checking...</span></p>
            <div id="mapcanvas" style="width: 500px; height: 400px">
            </div>
        </article>
        <script type="text/javascript">
            function success(position) {
                var s = document.querySelector('#status');

                s.innerHTML = "found you!";
                s.className = 'success';

                submitLocationToTruckwatch(position);

                // Google Map
                var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                var myOptions = {
                    zoom: 15,
                    center: latlng,
                    mapTypeControl: false,
                    navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);

                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    title: "You are here!"
                });
            }

            function error(msg) {
                var s = document.querySelector('#status');
                s.innerHTML = typeof msg == 'string' ? msg : msg;
                s.className = 'fail';

                console.log(arguments);
            }

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(success, error);
            } else {
                error('not supported');
            }

            // submitLocationToTruckwatch
            function submitLocationToTruckwatch(position) {
                var dataL = {
                    userid: $('#userid').val(),
                    passhash: $('#passhash').val(),
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude
                };
                var url = '/Services/UpdateLocation'; //Note: chanage this to absolute URL to test locally
                $('#serverresponse').html('calling service..');
                $.post(url, dataL, submitLocationCallback);
            }

            function submitLocationCallback(data, textStatus, jqXHR) {
                $('#serverresponse').html(data);
            }

            // timer fires 
            $('document').ready(function () {
                window.setInterval(updateLocation, 20000); // refresh every __ seconds.
            });

            function updateLocation() {
                if (navigator.geolocation)
                    navigator.geolocation.getCurrentPosition(success, error);
            }
        </script>
</section>
